<template>
	<view>
		
		<!-- 列表 -->
		<view class="RxList">
			<uv-swipe-action>
				<uv-list>
					<uv-list-item v-for="item, index in RxData" :key="index">
						<uv-swipe-action-item :options="options" :index="index" :name="index" :disabled="userinfo.types === 1?false:true" @click="cellClick">
							<view class="swipe-action uv-border-top uv-border-bottom">
								<view style="margin-bottom: 20px;">
									<view class="card-item-inner" @click="listClick(item)">
										<view class="mask card" :style="{background: item.sex === '女'?color_nv:color_nan}"></view>
										<view v-if="item.visits.now_visit_date">
											<span class="source-tag" :style="{background: 'rgba(43, 164, 113, 0.1)', color: '#2c9c3c'}">
												<uv-text :text="`复诊 `+item.visits.now_visit_date" color="#2c9c3c" iconStyle="color:'#2c9c3c'" customStyle="margin-left:20px"></uv-text>
												<!-- <uv-text v-if="userinfo.types < 2" :text="` 复诊 `+item.visits.now_visit_date" color="#2c9c3c" iconStyle="color:'#2c9c3c'" customStyle="margin-left:20px"></uv-text>
												<uv-text v-else :text="` `+item.clinic.clinic_name+` 复诊 `+item.visits.now_visit_date" color="#2c9c3c" iconStyle="color:'#2c9c3c'" customStyle="margin-left:20px"></uv-text> -->
											</span>
											<!-- <span class="source-tag" :style="{marginTop: '3px',color: '#2c9c3c'}">
												<uv-text color="#2c9c3c" prefixIcon="phone-fill" iconStyle="color:'#2c9c3c'" :call="true" mode="phone" :phone="item.mobile" ></uv-text>
											</span> -->
										</view>
										<uv-row justify="space-between" gutter="10">
											<uv-col span="8">
												<h3 :style="{padding: item.visits.now_visit_date ? '50rpx 0 20rpx 0' : '10rpx 0 20rpx 0',display: 'flex'}">
													<view :style="{display: 'flex'}"><uv-text text="No. " color="red" :bold="true"></uv-text>{{ item.orderId }}</view>
												</h3>
												<view class="source-detail">
													<view v-if="userinfo.types !== 1" class="source-detail-medic">{{ item.clinic.medic_name }}</view>
													<view>{{ item.slipCreateTime }}</view>
												</view>
											</uv-col>
											<uv-col span="4">
												<view :style="{padding: item.visits.now_visit_date ? '30rpx 0 20rpx 0' : '10rpx 0 20rpx 0'}">
													<uv-text :text="item.name" :bold="true" size="22" align="center"></uv-text>
												</view>
												
												<view style="display: flex;justify-content: space-between;">
													<uv-text :prefixIcon="item.sex === '女'?'woman':'man'" :iconStyle="{color: item.sex === '女' ? '#d27881' : '#5491f8','font-size': '18px'}" :text="item.sex"></uv-text>
													<view>
														<uv-text :text="item.age+`岁`"></uv-text>
													</view>
												</view>
											</uv-col>
										</uv-row>
										
									</view>
								</view>
							</view>
						</uv-swipe-action-item>
					</uv-list-item>
				</uv-list>
			</uv-swipe-action>
			
			<uv-modal ref="deleteRxModal" content='确定删除吗？' align="center" :showCancelButton="true" confirmColor="#2c9c3c" @confirm="delRx"></uv-modal>
			
			<uv-load-more :status="RxLoadingStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
		</view>
		<view style="height: 20px;"></view>
		
	</view>
</template>

<script>
	export default {
		name:"RxHomeList",
		props: {
			RxData: {},
			RxLoadingStatus: ''
		},
		data() {
			return {
				userinfo: {},
				color_nv: 'radial-gradient(50% 50% at 50% 50%,rgba(242,78,30,.1) 0,rgba(242,78,30,0) 100%)',
				color_nan: 'radial-gradient(50% 50% at 50% 50%,rgba(57,112,227,.1) 0,rgba(57,112,227,0) 100%)',
				loadingText: '努力加载中',
				loadmoreText: '轻轻向上划',
				nomoreText: '已经到底了',
				options: [{
					text: '修改',
					style: {
						backgroundColor: '#f9ae3d',  
					    width: '60px', // 设置宽度  
					    height: '60px', // 设置高度  
					    lineHeight: '60px', // 垂直居中文本  
					    color: 'white', // 文本颜色  
					    borderRadius: '50%', // 设置圆角  
					    display: 'flex', // 使用弹性布局  
					    justifyContent: 'center', // 水平居中  
					    alignItems: 'center', // 垂直居中
						margin: '0px 0px 20px 0px;'
					}
				},{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c',  
					    width: '60px', // 设置宽度  
					    height: '60px', // 设置高度  
					    lineHeight: '60px', // 垂直居中文本  
					    color: 'white', // 文本颜色  
					    borderRadius: '50%', // 设置圆角  
					    display: 'flex', // 使用弹性布局  
					    justifyContent: 'center', // 水平居中  
					    alignItems: 'center', // 垂直居中
						margin: '0px 0px 20px 0px;'
					}
				}],
				delete_rx_index: ''
			};
		},
		mounted() {
			this.userinfo = this.$store.state.userinfo
		},
		methods: {
			sex(x) {
				if (x === '女') {
					return '#d27881 '
				}
				return '#5491f8'
			},
			listClick(item) {
				console.log('点击了列表', item)
				uni.navigateTo({
				    url:`/pages/utils/rxDetails/rxDetails?data=`+ encodeURIComponent(JSON.stringify(item))
				})
			},
			delRx() {
				this.$emit("deleteRx", { rxIndex: this.delete_rx_index })
			},
			cellClick(inx) {
				if (inx.index === 0) {
					uni.showLoading()
					console.log('滑动点击了修改', inx)
					uni.downloadFile({  
					    url: this.RxData[inx.name].rx_image_url, // 网络图片地址  
					    success: (res) => {  
							 this.RxData[inx.name].canvas = { code: 1, tempImagePath: res.tempFilePath, width: this.RxData[inx.name].rx_image_width || 400, hight: this.RxData[inx.name].rx_image_hight || 700 }
							 this.$store.dispatch('set_rx', this.RxData[inx.name])
							 uni.navigateTo({
							 	url:'/pages/medic/create_rx/create_rx'
							 })
							 uni.hideLoading()
					    }  
					});
					
				}
				if (inx.index === 1) {
					console.log('滑动点击了删除', inx)
					this.delete_rx_index = inx.name
					this.$refs.deleteRxModal.open()
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.RxList {
		margin: 7px 7px 7px 7px;
		
		.card-item-inner {
			border: 1rpx solid rgb(236, 236, 236);
			background: rgb(249, 249, 251);
			border-radius: 9px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 16px;
			
			.mask {
				border-radius: 100%;
				height: 600rpx;
				left: 0;
				pointer-events: none;
				position: absolute;
				top: 0;
				width: 600rpx;
				z-index: 10;
			}
			.mask.card {
				animation: maskRun 20s linear infinite;
			}
			
			.source-tag {
				border-bottom-right-radius: 10rpx;
				border-top-left-radius: 10rpx;
				left: 1rpx;
				padding: 12rpx 12rpx 12rpx 0rpx;
				position: absolute;
				top: 1rpx;
			}
			.source-detail {
				color: rgba(0, 0, 0, 0.4);
				display: flex;
				align-items: center;
				
				.source-detail-medic {
					margin-right: 10px;
				}
			}
		}
	}
	
	.uv-page {
			padding: 0;
		}
		.uv-demo-block__title {
			padding: 10px 0 2px 15px;
		}
		.swipe-action {
			&__content {
				padding: 25rpx 0;
				&__text {
					font-size: 15px;
					color: #222;
					padding-left: 30rpx;
				}
			}
		}
</style>